<!-- HTML 属性应当按照以下给出的顺序依次排列，确保代码的易读性。
    class
    id, name
    data-*
    src, for, type, href, value
    title, alt
    role, aria-*
-->
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
		<title>llzhang</title>
        <meta charset="UTF-8">
        <!--如果是IE，会使用最新的渲染引擎进行渲染-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--标准的视口设置-->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS integrity:防止CDN篡改Javascript; crossorigin:告诉浏览器执行href的而不发送用户凭证;-->
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style type="text/css">
            /* Make the image fully responsive */
            .carousel-inner img {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="container" id="app">
            <div>
                <h1 class="text-center">课堂学生报告</h1>
            </div>
            <div class="row">
                <button type="button" class="btn btn-primary" data-toggle="tooltip" v-on:click="queryReport" data-placement="top">查询</button>
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">3年1班</button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">3年2班</a>
                        <a class="dropdown-item" href="#">3年3班</a>
                        <a class="dropdown-item" href="#">3年4班</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">自然课</button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">科学课</a>
                        <a class="dropdown-item" href="#">社会课</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">2018/2/25</button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">2018/2/23</a>
                        <a class="dropdown-item" href="#">2018/2/6</a>
                        <a class="dropdown-item" href="#">2018/2/15</a>
                    </div>
                </div>
            </div>
            <div class="carousel slide" id="classpic" data-ride="carousel">
                <!-- 指示符 -->
                <ul class="carousel-indicators">
                    <li data-target="#classpic" data-slide-to="0" class="active"></li>
                    <li data-target="#classpic" data-slide-to="1"></li>
                    <li data-target="#classpic" data-slide-to="2"></li>
                </ul>
                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="http://static.runoob.com/images/mix/img_fjords_wide.jpg">
                    </div>
                    <div class="carousel-item">
                        <img src="http://static.runoob.com/images/mix/img_nature_wide.jpg">
                    </div>
                    <div class="carousel-item">
                        <img src="http://static.runoob.com/images/mix/img_mountains_wide.jpg">
                    </div>
                </div>
                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#classpic" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#classpic" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>
            <div>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th scope="col">编号</th>
                            <th scope="col">姓名</th>
                            <th scope="col">学习状态</th>
                            <th scope="col">综合表现</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="success" v-for="site in sites">
                            <td><label>{{site.userid}}</label></td>
                            <td><label>{{site.name}}</label></td>
                            <td><label>{{site.expression}}</label></td>
                            <td><label>{{site.synthesize}}</label></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!--div class="pager" id="pager">
                <span class="form-inline">
                    <select class="form-control" v-model="pagesize" v-on:change="showPage(pageCurrent,$event,true)" number>
                        <option v-for="item in arrPageSize" value="{{item}}">{{item}}</option>
                    </select>
                </span>
                <template v-for="item in pageCount+1">
                    <span v-if="item==1" class="btn btn_default" v-on:click="showPage(1,$event)">首页</span>
                    <span v-if="item==1" class="btn btn_default" v-on:click="showPage(pageCurrent-1,$event)">上一页</span>
                    <span v-if="item==1" class="btn btn-default" v-on:click="showPage(item,$event)">{{item}}</span>
                    <span v-if="item==1&&item<showPagesStart-1" class="btn btn-default disabled">...</span>
                    <span v-if="item>1&&item<=pageCount-1&&item>=showPagesStart&&item<=showPageEnd&&item<=pageCount" class="btn btn-default" v-on:click="showPage(item,$event)">{{item}}</span>
                    <span v-if="item==pageCount&&item>showPageEnd+1" class="btn btn-default disabled">...</span>
                    <span v-if="item==pageCount&&item!=1" class="btn btn-default" v-on:click="showPage(item,$event)">{{item}}</span>
                    <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCurrent+1,$event)">下一页</span>
                    <span v-if="item==pageCount" class="btn btn-default" v-on:click="showPage(pageCount,$event)">尾页</span>
                </template>
                <span>{{pageCurrent}}/{{pageCount}}</span>
            </div-->
            <div class="clearfix"></div>
        </div>

        <!-- 模态框 -->
		<div class="modal fade" id="conModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h1 class="modal-title">{{ modalMsgTitle }}</h1>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        {{ modalMsgBody }}
                    </div>
                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <!--script src= "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script-->
        <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="https://cdn.staticfile.org/vue/2.2.6/vue.min.js"></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.4.0/vue-resource.js"></script>
        <!--script src="https://cdn.bootcss.com/vue-resource/1.4.0/vue-resource.min.js"></script-->
        <script src="referat.js"></script>
    </body>
</html>